import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {Select, Input, Tag, Table} from 'antd';

import {defaultPagination, Search, TableBtn} from '../publicComponents';
import {get} from "../../../utils";
import {mUrl} from "../../../config";
import {SelectSync} from "../../../compoments/SelectSync";

const Option = Select.Option;

const Page = () => {
    const [dataData, setDataSource] = useState([]);
    const [pagination, setPagination] = useState(Object.assign({},defaultPagination)); // 表格分页
    const [searchDetail, setSearchDetail] = useState({}); // 表格内容信息
    const [parentid, setParentId] = useState('');
    
    const columns = [
        {
            title: '序号',
            align: 'center',
            key: 'operateid',
            width: 100,
            render: (text, record, index) =>  ((pagination.pageSize * (pagination.current ? pagination.current - 1 : 0)) + index + 1)
        },
        {
            title: '操作',
            align: 'center',
            width: 100,
            render: (text, record, index) => {
                return (
                    <TableBtn
                        record={record}
                        btns={[
                            {name: '详情'}
                        ]}
                    />
                );
            }
        },
        {
            title: '操作类型',
            align: 'center',
            key: 'operatetype',
            dataIndex: 'operatetype',
            render: operatetype => {
                let text = '';
                switch (operatetype) {
                    case 1:
                        text = '新增';
                        break;
                    case 2:
                        text = '修改';
                        break;
                    case 3:
                        text = '删除';
                        break;
                    case 4:
                        text = '其他';
                        break;
                    default:
                }
                return text;
            }
        },
        {
            title: '操作人',
            align: 'center',
            key: 'createuser',
            dataIndex: 'createuser'
        },
        {
            title: '操作描述',
            align: 'center',
            key: 'remark',
            dataIndex: 'remark'
        },
    ];

    useEffect(() => {
        fetch();
    }, []);

    const fetch = (params = {}) => {
        let start = 1;
        if (params.startList > 1) {
            start = params.startList;
        }
        get(mUrl.getLogOperateList, {pageNo: start, pageSize: pagination.pageSize, ...params}).then((res) => {
            const {list = [], count = 0} = res.data;
            pagination.total = count;
            setPagination(pagination);
            setDataSource(list);
            setSearchDetail(params);
        });
    };

    const onSearch = (value) => {
        fetch(value);
    };
    const onReset = () => {
        fetch({});
    };
    
    const handleTableChange = (page) => {
        window.scrollTo(0, 0);
        pagination.current = page.current;
        pagination.pageSize = page.pageSize;
        setPagination(pagination);
        fetch({
            ...searchDetail,
            startList: page.current
        });
    };

    return (
        <div style={{padding: 14, background: '#fff', minHeight: 360}}>
            <label><p>权限管理 / 操作日志</p></label>
            <Search
                onSearch={onSearch}
                onReset={onReset}
                searchData={[
                    {
                        key: 'userid', name: '操作人', component: (
                            <SelectSync
                                type={'get'}
                                name="name"
                                selectKey="id"
                                params={{
                                    pageNo: 1,
                                    pageSize: 999,
                                }}
                                url={mUrl.searchUserList}
                                placeholder="请选择"
                            />
                        )
                    },
                    {
                        key: 'operatetype', name: '操作类型', component: (
                            <Select placeholder={'请选择'}>
                                <Option value={''}>全部</Option>
                                <Option value={'1'}>新增</Option>
                                <Option value={'2'}>修改</Option>
                                <Option value={'3'}>删除</Option>
                                <Option value={'4'}>其他</Option>
                            </Select>
                        )
                    },
                    {key: 'remark', name: '操作描述', component: (<Input allowClear placeholder={'请输入'}/>)}
                ]}
            />
            <Table
                columns={columns}
                dataSource={dataData}
                size='small'
                rowKey={'operateid'}
                bordered
                pagination={pagination}
                onChange={handleTableChange}
                rowClassName={(record) => {
                    if (record.operateid === parentid) {
                        return 'table-select-type';
                    } else {
                        return 'table-type';
                    }
                }}
                onRow={record => {
                    return {
                        onClick: event => {
                            setParentId(record.operateid);
                        },
                    };
                }}
            />
        </div>
    );
};

export default connect()(Page);